<template>
  <div class="personal_login">
    <div class="login_header">
      <div class="main">
        <!-- <a :href="url">
                    <img src="@/assets/img/WechatIMG233.png" alt />
                </a>-->
      </div>
    </div>
    <div class="logo">
      <a :href="url">
        <img src="@/assets/img/zhaopinLogo.png" alt />
      </a>
    </div>
    <div class="login_box">
      <!-- <div class="login_methods">
        <el-button :class="['message_log',{'active':form.loginType===1}]" plain @click="msg_log">短信登录</el-button>
        <el-button :class="['message_log',{'active':form.loginType===2}]" plain @click="pwd_log">密码登录</el-button>
      </div>
      <el-form :model="form" ref="form" :rules="rules">
        <div v-if="form.loginType===1">
          <el-form-item prop="phone">
            <el-input v-model.trim="form.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item prop="captchaCode">
            <el-input class="captchaCode" v-model="form.captchaCode" placeholder="图片验证码"></el-input>
            <img :src="img" alt @click="changeImage" />
          </el-form-item>
          <el-form-item prop="smsCode" class="btn_inner">
            <el-input v-model="form.smsCode" placeholder="短信验证码">
              <el-button slot="append" @click="postMassage" :class="{'disabled':countDown}">
                发送验证码
                <span v-show="countDown">({{countDown}})</span>
              </el-button>
            </el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item prop="account">
            <el-input v-model="form.account" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="captchaCode">
            <el-input v-model="form.captchaCode" placeholder="图片验证码" class="captchaCode"
              style="text-transform:uppercase;"></el-input>
            <img :src="img" alt @click="changeImage" />
          </el-form-item>
        </div>
        <div class="agreement">
          <el-checkbox v-model="checked"></el-checkbox>
          <span>自动登录</span>
          <router-link class="fr" to="findPassword">忘记密码？</router-link>
        </div>
        <el-form-item>
          <el-button class="submit_btn" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="to_reg">
        <span>没有樟树市人才服务账号？</span>
        <router-link to="/register">立即注册</router-link>
      </div> -->
      <div class="login_count">
        <el-row>
          <el-col :span="24" style="text-align: center">
            <img :src="src" alt="" style="width:249px;height:243px" />
            <div>
              <!-- <span v-if="!show" class="ewm">{{ times }}秒后过期</span>
                        <span v-if="show" class="ewm">已过期</span> -->

              <!-- <a v-if="show" href="javascript:;" @click="ewmsx">重新获取</a> -->
            </div>
            <div>
              <span class="ewm">请用微信扫描二维码登录</span>
              <a class="reond" href="javascript:;" @click="ewmsx">刷新</a>
            </div>
            <!-- <div class="register">
              <el-link type="primary" :href="baseURL+'/person/#/register'" target="_blank">注册找工作</el-link>
              <el-link type="primary" :href="baseURL+'/company/#/register'" target="_blank">免费发职位</el-link>
            </div> -->
          </el-col>
        </el-row>
        <div class="motk" v-show="times == 0"></div>
        <div class="motk_title" v-show="times == 0">
          <!-- 您的二维码已失效，请点击下方刷新按钮 -->
          <img src="@/assets/img/wxewmgq.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login,  captchaImg, postMsg, getUserlogin, wxLogin } from '../../../api/index';
import { encrypt } from '../../../utils/unitFile';
import { token } from '../../../api/code';
export default {
  name: 'personal_login',
  data () {
    var checkImage = (rule, value, callback) => {
      console.log('图片');

      if (value.length > 3) {
        captchaImg({ code: this.form.captchaCode, uuid: this.form.captchaUUid }).then(data => {
          if (data.data) {
            this.checkImage = true;
            callback();
          } else {
            callback(new Error('请输入正确验证码'));
          }
        });
      } else {
        callback();
      }
    };
    return {
      timerMin: null,
      timer: null,
      clickTime: 0,
      countDown: '',
      checked: false,
      checkImage: false,
      times: 60,
      show: true,
      src: '',
      img: '',
      url: '',
      form: {
        phone: '',
        account: '',
        password: '',
        captchaCode: '',
        captchaUUid: '',
        smsCode: '',
        loginType: 1
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^[0-9a-zA-Z_/.~!@#\$%\^&\-=?\/:;,\(\)"'`|*<>+]+$/, message: '账号由数字、字母符号组成' }
          // { pattern: /[0-9a-zA-Z]{6,20}/, message: '账号由长度为6-20的数字、字母组成' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[0-9a-zA-Z_]{6,20}$/, message: '密码由长度为6-20的数字、字母或下划线组成' }
        ],
        captchaCode: [{ required: true, message: '请输入图片验证码', trigger: 'blur' }, { validator: checkImage }],
        smsCode: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }]
      }
    };
  },
  created () {
    token().then(data => {
      if (data.success) {
        this.$message.error(`您已登录无需重复登录！`);
        this.$router.push({ path: '/' });
      }
    });
  },
  mounted () {
    this.url = process.env.VUE_APP_URL;
    // this.changeImage();
    this.getCode();
    this.timestamp();
    this.getUserlogin();
    this.wxLogin();
  },
  methods: {
    postMassage () {
      if (this.form.phone) {
        if (this.checkImage) {
          if (this.countDown) {
            return;
          }
          let query = {
            phone: this.form.phone,
            uuid: this.form.captchaUUid,
            code: this.form.captchaCode,
            type: 2
          };
          postMsg(query).then(data => {
            if (data.success) {
              let previous = this.clickTime;
              let now = new Date();
              if (now - previous > 60000) {
                console.log(1);
                this.clickTime = new Date();
                this.countDown = 60;
                this.timerMin = setInterval(() => {
                  this.countDown -= 1;
                }, 1000);
                this.timer = setTimeout(() => {
                  this.countDown = '';
                  clearInterval(this.timerMin);
                  clearTimeout(this.timer);
                }, 60000);
              }
            } else {
              this.checkImage = false;
              this.$message.error(`${data.msg}`);
            }
          });
        } else {
          this.$message.error('请正确输入图片验证码');
        }
      } else {
        this.$message.error('请输入手机号');
      }
    },
    // 提交
    onSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          let query = {
            account: this.form.phone || this.form.account,
            password: encrypt(this.form.password),
            captchaCode: this.form.captchaCode,
            captchaUUid: this.form.captchaUUid,
            smsCode: this.form.smsCode,
            loginType: this.form.loginType,
            captchaChannelType: 2
          };
          login(query).then(data => {
            console.log(data, '登录成功');
            if (data.success) {
              this.$message.success('登录成功');
              localStorage.setItem('ps_userName', data.data.userName);
              localStorage.setItem('ps_userId', data.data.userId);
              if (this.checked) {
                // localStorage.setItem('ps_password', this.form.password);
                // localStorage.setItem('ep_autoLogin', true);
              }

              // 简历未创建成功时
              if (data.data.step) {
                this.$router.push({
                  path: 'register-info',
                  query: {
                    mark: data.data.step
                  }
                });
              } else {
                this.$router.push({ path: '/' });
              }
            } else {
              this.changeImage();
              this.checkImage = false;
              this.clickTime = 0;
              this.countDown = '';
              this.form.smsCode = '';
              clearInterval(this.timerMin);
              clearTimeout(this.timer);
              this.$message.error(`${data.msg}`);
            }
          });
        } else {
          // this.$message.error('请输入账号和密码');
          console.log('error submit!!');
          return false;
        }
      });
    },
    timestamp () {
      this.timersta = setInterval(() => {
        console.log(33333);
        //  var str = timestamp.substring(8, timestamp.length);
        this.getUserlogin();
      }, 60000);
    },
    getUserlogin () {
      var timestamp = new Date().getTime() + '';
      timestamp = timestamp.substring(0, 8);
      getUserlogin().then(data => {
        if (data.success) {
          this.src = data.data.url;
          this.scene = data.data.scene;
        }
      });
    },
    wxLogin () {
      this.timerlogin = setInterval(() => {
        var timestamp = new Date().getTime() + '';
        timestamp = timestamp.substring(0, 8);
        // let quary = {
        //     sceneId: timestamp
        // };
        var formData = new FormData();
        formData.append('sceneId', this.scene);
        wxLogin(formData).then(data => {
          if (data.success) {
            //  this.src=data.data
            this.$message.success('登录成功');
            localStorage.setItem('ps_userName', data.data.userName);
            localStorage.setItem('ps_userId', data.data.userId);
            // if (this.checked) {
            //     localStorage.setItem('ep_password', this.form.password);
            //     // localStorage.setItem('ep_autoLogin', true);
            // }
            this.$router.push({ path: '/' });
            clearInterval(this.timer);
            clearInterval(this.timersta);
            clearInterval(this.timerlogin);
            console.log(3333333);

          } else {
          }
          // this.changeImage();
          this.checkImage = false;
          this.clickTime = 0;
          this.countDown = '';
          this.form.smsCode = '';
          clearInterval(this.form.timerMin);
          clearTimeout(this.form.timer);
        });
      }, 3000);
    },
    ewmsx () {
      this.times = 60;
      // this.wxLogin();
      this.getCode();
      this.getUserlogin();
      this.wxLogin();
      // this.src='http://10.2.11.244:8100/zsrencai/api/ms/user/login/qrcode'

      this.$forceUpdate();
    },
    getCode () {
      this.show = false;
      this.timer = setInterval(() => {
        this.times--;
        if (this.times === 0) {
          this.show = true;
          clearInterval(this.timer);
          clearInterval(this.timersta);
          clearInterval(this.timerlogin);
        }
      }, 1000);
    },
    msg_log () {
      this.form.loginType = 1;
      this.form.account = '';
    },
    pwd_log () {
      this.form.loginType = 2;
      this.form.phone = '';
    }
  }
};
</script>

<style lang="css" scoped>
.el-button.active {
    border-color: rgba(0, 147, 255, 1);
}
.login_methods {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    cursor: pointer;
    margin-top: 30px;
    text-align: center;
}
.personal_login {
    width: 100%;
    height: 100%;
    background: rgba(246, 246, 248, 1);
    opacity: 1;
}
.personal_login .login_header {
    width: 100%;
    height: 40px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.main a {
    display: inline-block;
    height: 40px;
}
.main a img {
    margin-top: 5px;
}
.personal_login .login_box {
    width: 424px;
    height: 370px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 6px rgba(51, 51, 51, 0.16);
    opacity: 1;
    border-radius: 8px;
    padding: 56px;
    margin: 80px auto 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.personal_login .login_box .el-form {
    margin-top: 14px;
}
.personal_login .login_box .message_log {
    font-size: 16px;
    width: 134px;
    height: 40px;
    opacity: 1;
}
.personal_login .login_box .el-input.captchaCode {
    display: inline-block;
    width: 181px;
    margin-right: 23px;
}
.personal_login .login_box .el-input.captchaCode /deep/ input.el-input__inner {
    text-transform: uppercase;
}
.personal_login .login_box img {
    vertical-align: middle;
    /* width: 108px;
    height: 40px; */
    cursor: pointer;
}
.personal_login .login_box .password_log {
    font-size: 16px;
    width: 134px;
    height: 40px;
    margin-left: 44px;
    opacity: 1;
}
/* .personal_login .btn_inner /deep/ .el-input__suffix {
    left: 205px;
    width: 70px;
    padding: 0;
} */
/* .personal_login .btn_inner .el-input__suffix .el-input__suffix-inner .el-button {
    width: 70px;
    height: 26px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0;
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    padding: 0;
    padding-left: 6px;
    cursor: pointer;
    border: none;
    border-left: 2px solid rgba(232, 232, 232, 1);
} */
.btn_inner /deep/ .el-button {
    width: 110px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0;
    background: #f5f7fa;
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    padding: 0;
    padding-left: 6px;
    cursor: pointer;
    border: none;
    /* border-left: 2px solid rgba(232, 232, 232, 1); */
}
.btn_inner /deep/ .el-button.disabled {
    color: #999999;
}
.personal_login .login_box .el-input {
    line-height: 40px;
    margin-top: 18px;
}
.personal_login .login_box .el-input /deep/ .el-input__inner {
    height: 40px;
    line-height: 40px;
    border-radius: 0;
}
.personal_login .agreement {
    margin: 28px 0;
    line-height: 20px;
}
.personal_login .agreement .el-checkbox,
.personal_login .agreement .el-checkbox .el-checkbox__inner {
    margin-top: 3px;
    margin-right: 4px;
    width: 12px;
    height: 12px;
}
.personal_login .agreement span {
    width: 56px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(153, 153, 153, 1);
    opacity: 1;
}
.personal_login .agreement a {
    width: 70px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(153, 153, 153, 1);
    opacity: 1;
}
.personal_login .submit_btn {
    width: 312px;
    height: 40px;
    background: rgba(24, 147, 252, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    font-size: 14px;
}
.personal_login .to_reg {
    margin-top: 32px;
    width: 196px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    opacity: 1;
}
.personal_login .to_reg span {
    color: rgba(153, 153, 153, 1);
}
.personal_login .to_reg a {
    color: rgba(0, 147, 255, 1);
}

.ewm {
    color: #cac3c3;
    margin-right: 10px;
}
.login_count {
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 300px;
}
.motk {
    position: absolute;
    top: 0;
    height: 243px;
    width: 280px;
    z-index: 1000;
    background: #f5f7fa;
    opacity: 0.6;
}
.motk_title {
    position: absolute;
    top: 40px;
    left: 83px;
    width: 120px;
    color: red;
    z-index: 1001;
}
.reond {
    z-index: 1228;
}
</style>